<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/base.css"/>
		<style type="text/css">
			.mui-title{
				color: #333;
			}
			.lefta{
				color: #ff6464;
			}
			.pic{
				width: 100%;
				height: 254px;
				background-color: #000;
				padding-top: 6px;
			}
			.pic img{
				width: 158px;
				height: 241px;
				display: block;
				margin: 0 auto;
			}
			.title{
				display: flex;
				border-bottom: 1px #000000 solid;
				margin: 18px 17px 14px;
				justify-content: space-between;
			}
			.title .good{
				width: 59px;
				height: 59px;
				background-color: #fff;
			}
			.title .desc h3{
				font-size: 16px;;
			}
			.title .desc p{
				font-size: 12px;
				line-height: 16px;
				color: #cccccc;
			}
			.title .good{
				box-shadow: 0 0 20px #9e9e9e;
				text-align: center;
			}
			.title .good p{
				font-size: 12px;
				margin-bottom: 0;
				color: #cccccc;
			}
			.title .good h1{
				font-size: 18px;
				margin: 0;
			}
			.content{
				margin: 0 17px;
			}
			.content h4{
				font-size: 12px;
				color: #ccc;
			}
			.content p{
				font-size: 14px;
				color: #333;
				margin-bottom: 15px;
			}
			.actor{
				margin: 0 17px;
			}
			.actor h4{
				font-size: 12px;
				color: #ccc;
			}
			.actor ul{
				list-style: none;
				display: flex;
				padding: 0;
			}
			.actor ul li{
				text-align: center;
				margin-right: 10px;
			}
			.actor ul li p{
				color: #333;
				font-size: 12px;
			}
			.actor ul li img{
				width: 69px;
				height: 97px;
			}
			button{
				width: 100%;
				background-color: #b0b0b0;
				color: #333;
				height:36px ;
				margin-bottom: 20px;
			}
		</style>
	</head>

	<body>
		<!-- 头部标题 -->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left lefta"></a>
			<h1 class="mui-title">电影</h1>
		</header>
		
		<div class="mui-content" id="app2">
			<div class="pic">
				<img :src="movie.images.large" >
			</div>
			<div class="title">
				<div class="desc">
					<h3>{{movie.title}}</h3>
					<p>{{movie.year}}/{{movie.countries}}/{{movie.genres}}</p>
					<p>{{movie.directors2}}导演作品</p>
				</div>
				<div class="good">
					<p>豆瓣评分</p>
					<h1>{{movie.rating.average}}</h1>
					<p>{{movie.wish_count}}人</p>
				</div>
			</div>
			<div class="content">
				<h4>剧情简介</h4>
				<p v-if="movie.summary">{{movie.summary}}</p>
				<p v-else>暂无数据</p>
			</div>
			<div class="actor">
				<h4>演员</h4>
				<div class="tx">
					<ul>
						<li v-for="(val,key) in movie.casts" :key="key">
							<img :src="val.avatars.large">
							<p>{{val.name}}</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="pl">
				<button type="button">评论</button>
			</div>
		</div>
		
		
		
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			mui.init();
			
			let APP = new Vue({
				el: '#app2',	// 挂载
				data: {
					mid: 0,
					movie: {
						images: {},
						rating: {}
					}
				}
			});
			
			// 绑定mui.fire() 自定义的事件
			window.addEventListener('getMovie', function(e){
				// console.log(JSON.stringify(e));
				let mid = e.detail.mid;
				console.log(mid);
				
				// 增加loading加载效果
				plus.nativeUI.showWaiting('加载中...');
				
				// 写电影详情内容的请求
				mui.getJSON('http://t.yushu.im/v2/movie/subject/'+mid,{
					apikey: '0df993c66c0c636e29ecbb5344252a4a'
				},function(data){
					// 成功
					// console.log(JSON.stringify(data));	// 把json对象转成字符串
					
					// 对国家、剧情、导演的数据进行处理
					data.countries = data.countries.join('，');
					
					data.genres = data.genres.join('，');
					
					let arr=[];
					data.directors.forEach(function(v){
						arr.push(v.name);
					})
					// json对象可增加新的属性
					data.directors2 = arr.join('/')
					
					APP.movie = data;
					
					setTimeout(function(){
						plus.nativeUI.closeWaiting();
					},500);
					
				},function(){
					alert('请求延迟，请检查网络');
				});
			})
			
			// 监听当前窗口是否隐藏
			mui.plusReady(function () {
			    // 获取当前窗口
				 let self = plus.webview.currentWebview();
				 self.addEventListener('hide', function(){
					 // console.log(3);
					 // 页面回到顶部
					 window.scrollTo(0, 0);
					 // 清空数据
					 APP.movie = {
						images: {},
						rating: {}
					}
				 })
			})
		</script>
	</body>

</html>
